
/* --------- Responsive Mixins --------- */
@define-mixin media-mobile{
	@media screen and (max-width: 750px){
		@mixin-content;
	}
}
/* --------- /Responsive Mixins --------- */


/* --------- Layout Mixins --------- */
@define-mixin ripple{
	position: relative;
	overflow: hidden;
	&:after {
		content: "";
		display: block;
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		pointer-events: none;
		background-image: radial-gradient(circle, #000 10%, transparent 10.01%);
		background-repeat: no-repeat;
		background-position: 50%;
		transform: scale(10,10);
		opacity: 0;
		transition: transform .5s, opacity 1s;
	}

	&:active:after {
		transform: scale(0,0);
		opacity: .2;
		transition: 0s;
	}
}

@define-mixin fit-parent{
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
}

@define-mixin clearfix{
	&:before,
	&:after {
		content: " ";
		display: table;
	}
	&:after {
		clear: both;
	}
}

@define-mixin special-font-family{
	font-family: 'Oswald';
	letter-spacing: .1em;
}

@define-mixin overflow-auto{
	overflow: auto;
	overflow: overlay;
}

@define-mixin overflow-x-auto{
	overflow-x: auto;
	overflow-x: overlay;
}

@define-mixin overflow-y-auto{
	overflow-y: auto;
	overflow-y: overlay;
}
/* --------- /Layout Mixins --------- */

@define-mixin h-scrollbar{
	overflow-x: overlay;
	overflow-y: hidden;
	&::-webkit-scrollbar{
		height: 6px;
		display: block;
	}

	&::-webkit-scrollbar-track{
		border-radius: 10px;
		background-color: var(--app-color-white);
		border: 1px solid var(--color-grey-light);
	}

	&::-webkit-scrollbar-thumb{
		border-radius: 10px;
		width: 100px;
		background-color: var(--color-grey-light);
	}
}